<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" id="btn" value="按钮1"><br><br>
<input type="button" id="btn2" value="按钮2"><br><br>
<input type="button" id="btn4" value="按钮3"><br><br>
<input type="button" id="btn3" value="解绑"><br><br>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("#btn").on("click",function () {
            alert("123");
        })

        // $("#btn2").on({
        //     "click":function () {
        //         alert("456")
        //     },
        //     "mouseover":function () {
        //         $(this).css("background-color","red")
        //     },
        //     "mouseout":function () {
        //         $(this).css("background-color","green")
        //     }
        // })
        $("#btn2").mouseover(function () {
            $(this).css("background-color","orange")
        }).mouseout(function () {
            $(this).css("background-color","red")
        })

        $("#btn3").click(function () {
            $("#btn2").css("background-color","blue")
            $("#btn2").off("")
        })

        $("#btn4").hover(function () {
                $(this).css("background-color","red")
        },function() {
                $(this).css("background-color","red")
            })


    })



</script>